import Path from './svg/path'
import { message } from 'antd';
import { useState, useRef } from 'react';
import {useMouse} from 'ahooks'
import Selection from './Selection'

function svgPainter({data, mode, change}) {
    // const [displayOnlyData, setDisplay] = useState()
    const [selectX, setSelectX] = useState(114514);
    const [selectY, setSelectY] = useState(114514);
    const [selectStartX, setSelectStartX] = useState(2333)
    const [selectStartY, setSelectStartY] = useState(2333)
    const [selectdObj, setSelectObj] = useState({
        startMouseX:114514, // 鼠标开始时X坐标
        startMouseY:114514, // 鼠标开始时Y坐标
    })
    const [selectWidth, setSelectWidth] = useState(233);
    const [selectHeight, setSelectHeight] = useState(233);
    const [selectedEle, setSelectEle] = useState(null);
    const [scale, setScale] = useState(null);//缩放方向
    const [startW, setStartW] = useState(2333);
    const [startH, setStartH] = useState(2333);
    
    const ref = useRef(null)
    const mouse = useMouse(ref.current);
    
    /**
     * 设置选中
     * @param {Object} obj 
     * @param {number} obj.startMouseX // 鼠标开始时X坐标
     * @param {number} obj.startMouseY // 鼠标开始时Y坐标
     */
    const setSelect = (obj) => {
        setSelectObj(v => {
            return Object.assign(v,obj);
        })
    }

    const select = (id) => {
        if (mode == 'select') {
            console.log('%c 选择的id', 'color:#014', id)
            const ele = data.find(v => v.id ==id);
            if (ele) {
                // 之所以单开一个状态是为了撤销与重做功能的实现
                // 其实还有一种方式，就是选中时单开一个撤销与重做列表
                // 没事，这个先预留着
                setSelectEle(ele);
                let minX = Infinity
                let minY = Infinity
                let maxX = -Infinity
                let maxY = -Infinity
                switch (ele.type) {
                    case 'path':
                        ele.data.forEach(v => {
                            if (v[0]<minX) {
                                minX = v[0]
                            }
                            if (v[0]>maxX) {
                                maxX = v[0]
                            }
                            if (v[1]< minY) {
                                minY = v[1]
                            }
                            if (v[1]>maxY) {
                                maxY = v[1]
                            }
                        })
                        setSelectX(minX);
                        setSelectY(minY);
                        setSelectWidth(maxX-minX);
                        setSelectHeight(maxY - minY);
                        break;
                    default:
                        message.error('有未知元素。请升级版本')
                }
            }
        }
    }
    // const onSelectionMouseDown = (event) => {
    //     console.log('%c 选中鼠标落下', 'color: #015', event);
    //     setStartX(mouse.elementX);
    //     setStartY(mouse.elementY);
    // }
    const onMoveStart = (event) => {
        setSelectStartX(event.left);
        setSelectStartY(event.top);
        if (selectedEle) {
            select(selectedEle.id)
        }
    }
    /**
     * 缩放开始
     * @param {MouseEvent} event 
     * @param {string} direction 
     */
    const onScaleStart= (event,direction) => {
        console.log('%c 缩放开始', 'color:#01b',event, direction);
        setScale(direction);
        setSelectStartX(event.clientX);
        setSelectStartY(event.clientY);
        setStartW(selectWidth);
        setStartH(selectHeight);
    }
    const setSelectedPosition = (offX, offY) => {
        if (selectedEle) {
            switch (selectedEle.type) {
                case 'path':
                    const ele = {...selectedEle};
                    ele.data=selectedEle.data.map(v => {
                        return [v[0]+offX, v[1]+offY];
                    })
                    change(ele);
                    break;
                default:
                    message.error('有未知元素。请升级版本')
            }
            setSelectX(selectStartX + offX);
            setSelectY(selectStartY + offY);
        }
    }
    const onMouseMove =() => {
        if (scale) {
            // 缩放模式
            const x = mouse.clientX;
            const y = mouse.clientY;
            const offX = x - selectStartX;
            const offY = y - selectStartY;
            console.log('%c 纵向移动', 'color: #016',x, offX)
            switch(scale) {
                case 7:
                    setSelectHeight(startH - offY)
                    setSelectY(selectStartY + offY)
                    break;
                default:
                    message.error('你好，我是电脑，我现在想吐槽，这个程序员太菜了，让我移动还不告诉我方向，我也不知道该怎么办了');
            }
        }
    }
    
    const cancelSelect = () => {
        // setSelectX(114514);
        // setSelectY(114514);
    }
    const onMouseUp = () => {
        setScale(null);
    }
    return (<div className='relative' ref={ref} onMouseMove={onMouseMove} onMouseUp={onMouseUp}>
        <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" onClick={cancelSelect}>
            {data.map((v,i)=>{
                switch (v.type) {
                    case 'path':
                        return (<Path onClick={() =>select(v.id)} lines={v.data} stroke={v.color} strokeWidth={v.width} key={v.id} />);
                    default:
                        message.error('有未知元素。请升级版本')
                        return []
                }
            })}
        </svg>
        {mode == 'select'?(<Selection
            left={selectX}
            top={selectY}
            width={selectWidth}
            height={selectHeight}
            setPosition={setSelectedPosition}
            onMoveStart={onMoveStart}
            onScaleStart={onScaleStart}
        />): null}
    </div>)
}
export default svgPainter;